<script setup lang="ts">
import { markRaw, nextTick,  onBeforeUpdate,  reactive, ref } from "vue";
import * as echarts from 'echarts';

const elementChart1 = ref()
const elementChart2 = ref()

const props = defineProps({
  info1: Object,
  info2: Array,
})

const state = reactive({
  myCharts: [] as any,
  chartData: {
    element1: null as any,
    element2: null as any,
  }
})

const initChart1 = () => {
  state.chartData.element1 = markRaw(echarts.init(elementChart1.value));
  let data = [
    {
      value: 41,
      name: '国家下发'
    },
    {
      value: 38 ,
      name: '部门上报'
    },
  ];
  let color = ['#69FFE3', '#2196F3', '#1DB7E5'];
  let baseData = [];
  for (var i = 0; i < data.length; i++) {
    baseData.push({
      value: data[i].value,
      name: data[i].name,
      itemStyle: {
        normal: {
          borderWidth: 0,
          shadowBlur: 0,
          borderColor: color[i],
          shadowColor: 'rgba(0, 0, 0, 0.8)'
        }
      }
    });
  }
  const option = {
    title: {
      text: props.info1?.total,
      subtext: '总',
      textStyle: {
        color: '#fff',
        fontSize: 16,
      },
      top: '42%',
      left: 'center',
    },
    backgroundColor: '#FF000000',
    color: color,
    grid: {
      top: 'bottom',
      left: '90',
      width: '90%',
      height: '80%',
    },
    series: [{
      zlevel: 1,
      name: '数据采集',
      type: 'pie',
      selectedMode: 'single',
      radius: ['50%', '70%'],
      startAngle: '135',
      hoverAnimation: false,
      label: {
        normal: {
          show: false,
          formatter: ['{c|{c}}', '{b|{b}}'].join('\n'),
          rich: {
            b: {
              fontSize: 16,
              lineHeight: 30
            }

          }
        }
      },
      itemStyle: {
        normal: {
          shadowColor: 'rgba(0, 0, 0, 0.8)',
          shadowBlur: 50,
        }
      },
      data: baseData
    }]
  };
  state.chartData.element1.setOption(option);
  state.myCharts.push(state.chartData.element1);
}

const initChart2 = () => {
  state.chartData.element2 = markRaw(echarts.init(elementChart2.value));
  const option = {
    backgroundColor: "#FF000000",
    color: ["#745AF2", "#2196F3", "#69FFE3"],
    grid: {
      left: -100,
      top: 50,
      bottom: 10,
      right: 10,
      containLabel: true
    },
    legend: {
      show: false,
      type: "scroll",
      orient: "vartical",
      // x: "right",
      top: "center",
      right: "15",
      // bottom: "0%",
      itemWidth: 16,
      itemHeight: 8,
      itemGap: 16,
      textStyle: {
        color: '#A3E2F4',
        fontSize: 12,
        fontWeight: 0
      },
      data: ['IDS', 'VPN', '交换机']
    },
    polar: {},
    angleAxis: {
      interval: 1,
      type: 'category',
      data: [],
      z: 10,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0B4A6B",
          width: 1,
          type: "solid"
        },
      },
      axisLabel: {
        interval: 0,
        show: true,
        color: "#0B4A6B",
        margin: 8,
        fontSize: 16
      },
    },
    radiusAxis: {
      min: 40,
      max: 120,
      interval: 20,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#0B3E5E",
          width: 1,
          type: "solid"
        },
      },
      axisLabel: {
        formatter: '{value} %',
        show: false,
        padding: [0, 0, 20, 0],
        color: "#0B3E5E",
        fontSize: 16
      },
      splitLine: {
        lineStyle: {
          color: "#0B3E5E",
          width: 2,
          type: "solid"
        }
      }
    },
    calculable: true,
    series: [{
      type: 'pie',
      radius: ["5%", "10%"],
      hoverAnimation: false,
      labelLine: {
        normal: {
          show: false,
          length: 30,
          length2: 55
        },
        emphasis: {
          show: false
        }
      },
      data: [{
        name: '',
        value: 0,
        itemStyle: {
          normal: {
            color: "#0B4A6B"
          }
        }
      }]
    }, {
      type: 'pie',
      radius: ["90%", "95%"],
      hoverAnimation: false,
      labelLine: {
        normal: {
          show: false,
          length: 30,
          length2: 55
        },
        emphasis: {
          show: false
        }
      },
      name: "",
      data: [{
        name: '',
        value: 0,
        itemStyle: {
          normal: {
            color: "#0B4A6B"
          }
        }
      }]
    }, {
      stack: 'a',
      type: 'pie',
      radius: ['20%', '80%'],
      roseType: 'area',
      zlevel: 10,
      label: {
        normal: {
          show: false,
          formatter: "{c}",
          textStyle: {
            fontSize: 12,
          },
          position: 'outside'
        },
        emphasis: {
          show: true
        }
      },
      labelLine: {
        normal: {
          show: false,
          length: 20,
          length2: 55
        },
        emphasis: {
          show: false
        }
      },
      data: [{
        value: 10,
        name: 'IDS'
      },
      {
        value: 5,
        name: 'VPN'
      },
      {
        value: 15,
        name: '交换机'
      }
      ]
    },]
  }
  state.chartData.element2.setOption(option);
  state.myCharts.push(state.chartData.element2);
}

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.myCharts.length; i++) {
      setTimeout(() => {
        state.myCharts[i].resize();
      }, i * 1000);
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener('resize', initEchartsResizeFun);
};

onBeforeUpdate(() => {
  initEchartsResize()
  initChart1();
  initChart2();
})



</script>


<template>
  <div style="width: 100%;height: 100%;padding: 2px;box-sizing: border-box;">
    <div class="title">招才引智情况</div>
    <div class="main" style="display: flex;width:calc(100% - 4px);height: calc(100% - 40px)">
      <div style="flex: 1">
        <span class="category-title">人才</span>
        <div class="body">
          <div class="left" ref="elementChart1" />
          <div class="right">
            <div>高校和科研所领军人才</div>
            <span>{{ props.info1?.value1[0] }}</span>
            <div>企业研发人才</div>
            <span>{{ props.info1?.value1[1] }}</span>
          </div>
        </div>
        <div class="footer">全是引领顶尖人才（团队）</div>
      </div>
      <div style="flex: 1">
        <span class="category-title">项目</span>
        <div class="body">
          <div class="left" ref="elementChart2" />
          <div class="right">
            <div>招才引智类项目</div>
            <span  v-if="props.info2!==undefined">{{ props?.info2[0] }}</span>
            <div>高能级功能型平台</div>
            <span  v-if="props.info2!==undefined">{{ props?.info2[1] }}</span>
            <div>"专精特新"项目</div>
            <span v-if="props.info2!==undefined">{{ props?.info2[2] }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.title {
  border-left: 4px solid #32ffc7;
  font-size: 18px;
  color: #fff;
  padding-left: 8px;
  height: 18px;
  line-height: 18px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.category-title {
  display: block;
  font-size: 16px;
  color: #AEBBC2;
  padding: 10px 0 10px 10px;
}

.main {
  .footer {
    color: #13788d;
    font-size: 16px;
    padding-left: 20px;
  }

  .body {
    display: flex;
    width: 100%;
    height: calc(100% - 18px - 16px - 30px);

    .left {
      flex: 4;
      height: 100%;
    }

    .right {
      flex: 7;
      padding: 0 20px;
      width: calc(100% - 40px);
      font-size: 18px;

      >div {
        color: #13788d;
        padding: 4px;
        padding-left: 20px;
        position: relative;

        &::before {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 10px;
          height: 20px;
          background-color: #32ffc7;
        }
      }

      >span {
        color: white;
        padding-left: 20px;
        font-size: 22px;
        font-weight: bold;
      }
    }
  }
}
</style>